<template>
    <el-menu :class="cls" :default-active="route.name" :default-openeds="openItems" @select="changeMenu"
             unique-opened :collapse="!isCollapse">
        <el-menu-item index="home">
            <i class="verjsfont verjs-home menu-icon"></i>
            <template #title>首页</template>
        </el-menu-item>
        <left-menu-child-components v-for="its in routeMenu" :menu-list="its" :key="its.id"/>
    </el-menu>
</template>

<script setup>
import {computed, defineProps, onMounted} from "vue";
import {useStore} from "vuex";
import LeftMenuChildComponents from "@/components/veaHeaderComponents/LeftMenuChildComponents.vue";
import {useRoute} from "vue-router";
import router from "@/router";

const prop = defineProps({
    openItems: {
        type: Array,
        default: () => {
            return ['home']
        }
    },
    isCollapse: {
        type: Boolean,
        default: () => true
    }
})

const cls = computed(() => {
    let cls = 'el-menu-vertical'
    if (!prop.isCollapse) {
        cls += ' el-menu-vertical-close'
    }

    return cls
})
const store = useStore()
const route = useRoute()
const routeMenu = computed((() => {
    return store.state.routeMenu
}))
onMounted(() => {
    store.commit("getRoute")
})
const changeMenu = (value) => {
    //获取所有已配置的路由
    const routeName = (router.options.routes).map(its => {
        return its.name
    })
    if (value !== route.name && routeName.some(its => its === value)) {
        router.replace({name:value})
    }
}
</script>

<style lang="less" scoped>
.el-menu-vertical {
  max-width: 220px;
  height: calc(100vh - 45px);

  .menu-icon {
    padding-right: 15px;
  }
}
</style>